import { history } from "umi";
import { useLocation } from "umi";
import { useState } from "react";
import styled from "styled-components";
import { ProCard } from "@ant-design/pro-components";
import { Tag, Descriptions, Divider, Space } from "antd";
import Edit from "@/assets/image/icons/edit.svg";
import Calendar from "@/assets/image/icons/calendar.svg";
import Time from "@/assets/image/icons/time.svg";
import MonthlyPark from "@/assets/image/patterns/Monthly Park.png";
import DailyPark from "@/assets/image/patterns/Daily Park.png";
import AlertFill from "@/assets/image/icons/alert-fill.svg";
import "./index.less";
import { CustomTitle, CustomSubTitle } from "@/components/customTitle";
import { StyledWhiteBtn } from "@/components/button";
import { PaddingContent, ContentBorder } from "@/components/page-padding";
import CustomModal from "@/components/customModal";
import DateConverterUtils from "@/utils/dateUtils";
import { BookingDataRes } from "@/components/booking-record/types";
import CustomAlert from "@/components/customAlert";
import AlertCircle from "@/assets/image/icons/alert-circle.svg";

const StyledCancelBook = styled(StyledWhiteBtn)`
  margin-left: 24px;
  border: 1px solid #c02020;
  color: #c02020;
  &:hover {
    border: 1px solid #c02020 !important;
    color: #c02020 !important;
  }
`;

const StyledDisabledBtn = styled(StyledWhiteBtn)`
  color: #abadaf;
  border: 1px solid #abadaf;
  &:hover {
    border: 1px solid #abadaf !important;
    color: #abadaf !important;
  }
`;

const StyledTag = styled(Tag)`
  background-color: #e4f6ea;
  color: #26a461;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  border-radius: 94px;
`;
const BookingLabelStyle = {
  fontFamily: "Roboto",
  fontSize: "14px",
  fontWeight: "400",
  lineHeight: "21px",
  color: "#696767",
  marginTop: "24px",
};

const BookingContentStyle = {
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "400",
  lineHeight: "24px",
  color: "#202020",
  marginTop: "8px",
};

const BookingDetails = () => {
  const location = useLocation();
  const dataObj: BookingDataRes = location.state as BookingDataRes;

  console.log("dataObj=", dataObj);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <PaddingContent>
      <div className="bookingDetails-containery">
        <CustomTitle>Booking Records Details</CustomTitle>
        <ContentBorder>
          {dataObj.canUpdate === false && (
            <CustomAlert
              style={{ marginBottom: "40px" }}
              message="Modification Limit Reached"
              type="warning"
              showIcon={true}
              icon={AlertCircle}
              description="You have already modified your booking for today. Please note that modifications are allowed once only."
            />
          )}
          <ProCard
            bordered={false}
            title={
              <>
                {dataObj.passType === "Monthly" && (
                  <img
                    className="calendar-img"
                    src={Calendar}
                    alt="SVG Image"
                  />
                )}
                {dataObj.passType === "Daily" && (
                  <img className="calendar-img" src={Time} alt="SVG Image" />
                )}
                <span className="park-type">{dataObj.passType}</span>
                <Divider type="vertical" />
                <StyledTag
                  style={{ backgroundColor: " #e4f6ea", color: "#26a461" }}
                  color="success"
                  bordered={false}
                >
                  Successful
                </StyledTag>
              </>
            }
            layout="default"
            bodyStyle={{ display: "flex", justifyContent: "space-between" }}
          >
            <div className="park-info">
              {dataObj.passType === "Daily" && (
                <img className="park-img" src={DailyPark} alt="png" />
              )}
              {dataObj.passType === "Monthly" && (
                <img className="park-img" src={MonthlyPark} alt="png" />
              )}
              <span className="park-date">
                Parking Date: {DateConverterUtils.strToDate(dataObj.startDate)}{" "}
                ({dataObj.duration} Day)
              </span>
            </div>
            <Space>
              {dataObj.canUpdate === false && (
                <StyledDisabledBtn
                  style={{ margin: "7px 0" }}
                  icon={<img src={Edit} alt="svg"></img>}
                  onClick={() => history.push("/")}
                  type="default"
                  size={"middle"}
                  disabled={true}
                >
                  Modify
                </StyledDisabledBtn>
              )}

              {dataObj.canUpdate === true && (
                <StyledWhiteBtn
                  style={{ margin: "7px 0" }}
                  icon={<img src={Edit} alt="svg"></img>}
                  onClick={() => history.push("/")}
                  type="default"
                  size={"middle"}
                >
                  Modify
                </StyledWhiteBtn>
              )}

              <StyledCancelBook
                style={{ margin: "7px 0" }}
                onClick={() => setIsModalOpen(true)}
                type="default"
                size={"middle"}
              >
                Cancel Booking
              </StyledCancelBook>
            </Space>
          </ProCard>
          <Divider plain />
          <CustomSubTitle>Vehicle Information</CustomSubTitle>
          <Descriptions
            layout="vertical"
            labelStyle={BookingLabelStyle}
            contentStyle={BookingContentStyle}
            column={4}
          >
            <Descriptions.Item
              label="Vehicle Type"
              style={{ paddingBottom: 0 }}
            >
              {dataObj.vehType}
            </Descriptions.Item>
            <Descriptions.Item label="License Plate Number">
              {dataObj.lpnNo}
            </Descriptions.Item>
            <Descriptions.Item label="Octopus No. ">
              {dataObj.octopus}
            </Descriptions.Item>
          </Descriptions>
          <Divider plain />
          <CustomSubTitle>Parking Information</CustomSubTitle>
          <Descriptions
            layout="vertical"
            labelStyle={BookingLabelStyle}
            contentStyle={BookingContentStyle}
            column={4}
          >
            <Descriptions.Item label="Car Park">
              {dataObj.carParkEnName}
            </Descriptions.Item>
            {dataObj.passType === "Daily" && (
              <Descriptions.Item label="Entry Date">
                {DateConverterUtils.strToDate(dataObj.startDate)}
              </Descriptions.Item>
            )}
            {dataObj.passType === "Monthly" && (
              <Descriptions.Item label="Eligible Month">
                October 2024
              </Descriptions.Item>
            )}

            <Descriptions.Item label="Parking Period">
              {dataObj.duration} Day
            </Descriptions.Item>
            <Descriptions.Item label="Paid Amount">
              HK${dataObj.pymPrice}
            </Descriptions.Item>
            <Descriptions.Item label="Payment Status">
              <StyledTag
                style={{ backgroundColor: " #e4f6ea", color: "#26a461" }}
                color="success"
                bordered={false}
              >
                {dataObj.pymStatus}
              </StyledTag>
            </Descriptions.Item>
          </Descriptions>
        </ContentBorder>
      </div>

      {/*Cancel Booking  */}
      <CustomModal
        width="30%"
        icon={AlertFill}
        title="Cancel Your Booking?"
        content="The carpark booking fee will be non-refundable. Once cancelled, this action cannot be undone."
        onOk={handleCancel}
        onCancel={handleOk}
        isModalOpen={isModalOpen}
        btnLeftText="Close"
        btnRightText="Cancel Booking"
        btnRightBgColor="#C02020"
      />
    </PaddingContent>
  );
};

export default BookingDetails;
